<template>
  <el-table
    :data="list"
    highlight-current-row
    @row-click="handleRowClick"
    v-loading="loading"
    style="width: 100%"
    class="conversation-table"
    :style="{
      background: 'linear-gradient(135deg, rgba(0, 20, 40, 0.95) 0%, rgba(0, 40, 80, 0.95) 100%) !important',
      color: '#00d4ff !important',
      border: '1px solid rgba(0, 212, 255, 0.3) !important',
      '--el-table-header-bg-color': 'rgba(0, 212, 255, 0.25) !important',
      '--el-table-th-color': '#ffffff !important',
      '--el-table-border-color': 'rgba(0, 212, 255, 0.3) !important',
      '--el-table-bg-color': 'transparent !important'
    }"
  >
    <el-table-column prop="username" label="用户名" width="150" />
    <el-table-column label="最后消息">
      <template #default="{ row }">
        <div class="message-preview">{{ previewText(row.lastMessage) }}</div>
      </template>
    </el-table-column>
    <el-table-column prop="messageCount" label="消息数" width="100" align="center" />
    <el-table-column label="更新时间" width="180">
      <template #default="{ row }">{{ formatTime(row.updateTime) }}</template>
    </el-table-column>
  </el-table>
  
  <!-- <el-pagination
    v-model:current-page="pagination.page"
    :page-size="pagination.pageSize"
    :total="pagination.total"
    @current-change="handlePageChange"
    layout="total, prev, pager, next"
    class="pagination"
  /> -->
</template>

<script setup>
import { formatTime } from '@/utils/date'

defineProps({
  list: {
    type: Array,
    required: true
  },
  loading: {
    type: Boolean,
    default: false
  },
  pagination: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['row-click', 'page-change'])

const previewText = (text) => {
  return text?.length > 50 ? text.substring(0, 50) + '...' : text
}

const handleRowClick = (row) => {
  emit('row-click', row)
}

// const handlePageChange = (page) => {
//   emit('page-change', page)
// }
</script>

<style scoped>
/* 完全引用文档管理模块的表格样式 */
.conversation-table:deep(.el-table) {
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.95) 0%, rgba(0, 40, 80, 0.95) 100%) !important;
  color: #00d4ff !important;
}

.conversation-table:deep(.el-table__body-wrapper) {
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.9) 0%, rgba(0, 40, 80, 0.9) 100%) !important;
}

.conversation-table:deep(.el-table__header-wrapper) {
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.9) 0%, rgba(0, 40, 80, 0.9) 100%) !important;
}

.conversation-table:deep(.el-table__fixed-body-wrapper) {
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.9) 0%, rgba(0, 40, 80, 0.9) 100%) !important;
}

.conversation-table:deep(.el-table__fixed-header-wrapper) {
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.9) 0%, rgba(0, 40, 80, 0.9) 100%) !important;
}

.conversation-table:deep(.el-table th) {
  background: rgba(0, 212, 255, 0.25) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.4) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.conversation-table:deep(.el-table td) {
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.9) 0%, rgba(0, 40, 80, 0.9) 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.conversation-table:deep(.el-table tr:hover > td) {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 100%) !important;
  border-color: rgba(0, 212, 255, 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.1) !important;
}

.conversation-table:deep(.el-table--border) {
  border: 1px solid rgba(0, 212, 255, 0.3) !important;
}

.conversation-table:deep(.el-table--border th) {
  border-right: 1px solid rgba(0, 212, 255, 0.3) !important;
}

.conversation-table:deep(.el-table--border td) {
  border-right: 1px solid rgba(0, 212, 255, 0.2) !important;
}

/* 额外的表格样式覆盖 - 参考文档管理模块 */
.conversation-table:deep(.el-table) {
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.9) 0%, rgba(0, 40, 80, 0.9) 100%) !important;
  color: #ffffff !important;
}

.conversation-table:deep(.el-table__body-wrapper) {
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.9) 0%, rgba(0, 40, 80, 0.9) 100%) !important;
}

.conversation-table:deep(.el-table__header-wrapper) {
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.9) 0%, rgba(0, 40, 80, 0.9) 100%) !important;
}

.conversation-table:deep(.el-table th) {
  background: rgba(0, 212, 255, 0.25) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.4) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.conversation-table:deep(.el-table td) {
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.9) 0%, rgba(0, 40, 80, 0.9) 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.conversation-table:deep(.el-table tr:hover > td) {
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.9) 0%, rgba(0, 40, 80, 0.9) 100%) !important;
  border-color: rgba(0, 212, 255, 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.2) !important;
  color: #ffffff !important;
}

/* 强制覆盖所有可能的深色样式 - 参考文档管理模块 */
.conversation-table:deep(.el-table) {
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.9) 0%, rgba(0, 40, 80, 0.9) 100%) !important;
  color: #ffffff !important;
}

.conversation-table:deep(.el-table__body-wrapper) {
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.9) 0%, rgba(0, 40, 80, 0.9) 100%) !important;
}

.conversation-table:deep(.el-table__header-wrapper) {
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.9) 0%, rgba(0, 40, 80, 0.9) 100%) !important;
}

.conversation-table:deep(.el-table th) {
  background: rgba(0, 212, 255, 0.25) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.4) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.conversation-table:deep(.el-table td) {
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.9) 0%, rgba(0, 40, 80, 0.9) 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.conversation-table:deep(.el-table tr:hover > td) {
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.9) 0%, rgba(0, 40, 80, 0.9) 100%) !important;
  border-color: rgba(0, 212, 255, 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.2) !important;
  color: #ffffff !important;
}

/* 表格行样式 */
.conversation-table:deep(.el-table .el-table__row) {
  transition: all 0.2s ease;
  cursor: pointer;
}

.conversation-table:deep(.el-table .el-table__row.current-row) {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 153, 204, 0.2) 100%) !important;
}

/* 消息预览样式 */
.message-preview {
  color: #b3b3b3;
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 分页样式 */
.pagination {
  margin-top: 20px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.9) 0%, rgba(0, 40, 80, 0.9) 100%);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.2);
  border: 1px solid rgba(0, 212, 255, 0.3);
}

/* 引用文档管理模块的No Data状态样式 */
.conversation-table:deep(.el-table__empty-block) {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 153, 204, 0.2) 100%) !important;
  border: 1px solid rgba(0, 212, 255, 0.4) !important;
}

.conversation-table:deep(.el-table__empty-text) {
  color: #ffffff !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  font-size: 14px !important;
}

/* 最强优先级覆盖 - 确保所有表格单元格都是深色背景 */
.conversation-table:deep(.el-table) .el-table__cell {
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.9) 0%, rgba(0, 40, 80, 0.9) 100%) !important;
  color: #ffffff !important;
}

.conversation-table:deep(.el-table) td.el-table__cell {
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.9) 0%, rgba(0, 40, 80, 0.9) 100%) !important;
  color: #ffffff !important;
}

.conversation-table:deep(.el-table) th.el-table__cell {
  background: rgba(0, 212, 255, 0.25) !important;
  color: #ffffff !important;
}

/* 内联样式覆盖 */
.conversation-table:deep(.el-table) {
  --el-table-bg-color: transparent !important;
  --el-table-tr-bg-color: transparent !important;
  --el-table-td-color: #ffffff !important;
  --el-table-th-color: #ffffff !important;
}

/* 全局CSS变量覆盖 */
:deep(.conversation-table) {
  --el-table-bg-color: transparent !important;
  --el-table-tr-bg-color: transparent !important;
  --el-table-td-color: #ffffff !important;
  --el-table-th-color: #ffffff !important;
  --el-table-border-color: rgba(0, 212, 255, 0.3) !important;
  --el-table-header-bg-color: rgba(0, 212, 255, 0.25) !important;
  --el-table-row-hover-bg-color: rgba(26, 26, 46, 0.9) !important;
}

/* 最强优先级覆盖 - 表格头部 */
.conversation-table:deep(.el-table) th.el-table__cell {
  background: rgba(0, 212, 255, 0.25) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.4) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.conversation-table:deep(.el-table) .el-table__header-wrapper th {
  background: rgba(0, 212, 255, 0.25) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.4) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.conversation-table:deep(.el-table) .el-table__header th {
  background: rgba(0, 212, 255, 0.25) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.4) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* 使用属性选择器增加优先级 */
.el-table[class*="conversation-table"]:deep(th) {
  background: rgba(0, 212, 255, 0.25) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.4) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* 直接针对表格头部单元格 */
.conversation-table:deep(.el-table__header-wrapper .el-table__cell) {
  background: rgba(0, 212, 255, 0.25) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.4) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* 覆盖main.css的全局样式 - 最强优先级 */
.conversation-table:deep(.el-table) th.el-table__cell,
.conversation-table:deep(.el-table) .el-table__header-wrapper th,
.conversation-table:deep(.el-table) .el-table__header th,
.conversation-table:deep(.el-table) th {
  background: rgba(0, 212, 255, 0.25) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.4) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* 覆盖main.css的dark模式样式 */
@media (prefers-color-scheme: dark) {
  .conversation-table:deep(.el-table) th.el-table__cell,
  .conversation-table:deep(.el-table) .el-table__header-wrapper th,
  .conversation-table:deep(.el-table) .el-table__header th,
  .conversation-table:deep(.el-table) th {
    background: rgba(0, 212, 255, 0.25) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.4) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  }
}

/* 使用!important覆盖所有可能的样式 */
.conversation-table:deep(.el-table) th,
.conversation-table:deep(.el-table) .el-table__header-wrapper th,
.conversation-table:deep(.el-table) .el-table__header th,
.conversation-table:deep(.el-table) th.el-table__cell {
  background: rgba(0, 212, 255, 0.25) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.4) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* 全局覆盖 - 确保覆盖main.css的所有样式 */
:deep(.conversation-table .el-table th) {
  background: rgba(0, 212, 255, 0.25) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.4) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* 最强优先级 - 使用属性选择器 */
.el-table[class*="conversation-table"] th,
.el-table[class*="conversation-table"] .el-table__header-wrapper th,
.el-table[class*="conversation-table"] .el-table__header th {
  background: rgba(0, 212, 255, 0.25) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.4) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

@media (max-width: 768px) {
  :deep(.el-table .el-table__cell) {
    padding: 8px 0;
  }
  
  .message-preview {
    -webkit-line-clamp: 1;
  }
}
</style>